<template>
  <Panel class="flow" second title="今日累计流量">
    <div class="flow-statistical">
      <div class="today-total">
        <span class="number total">{{ todayTotal }} </span>
        <span class="unit">辆</span>
      </div>
      <div class="contrast">
        <SequentialSame :data="sameData"></SequentialSame>
      </div>
    </div>
    <div class="line-chart">
      <LineChart :seriesData="seriesData" :typeArr="typeArr" :xDate="xDate" />
    </div>
  </Panel>
</template>

<script>
export default {
  name: 'FlowStatistical'
}
</script>
<script setup>
/**
 * 流量统计
 * @author 阳坤（1194636148@qq.com）
 * @date   时间：2022/10/24
 */
import Panel from '../../components/panel'
import LineChart from '../../components/charts/ShadowLine.vue'
import SequentialSame from '../../components/sequential-same/index.vue'
import { toRefs, defineProps } from 'vue'

const props = defineProps({
  todayTotal: {
    type: [String, Number],
    default: '' // 今日累计流量
  },
  sameData: {
    type: Object,
    default: () => {} // 同环比
  },
  typeArr: {
    type: Array,
    default: () => [] // 折线图类型
  },
  xDate: {
    type: Array,
    default: () => [] // x轴数据
  },
  seriesData: {
    type: Array,
    default: () => [] // 折线数据
  }
})

const { todayTotal, sameData, typeArr, xDate, seriesData } = toRefs(props)
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);

.flow {
  // width: 32%;
  flex: 1;
  display: flex;
  flex-direction: column;

  .flow-statistical {
    display: flex;
    justify-content: space-between;

    .today-total {
      display: flex;

      .total {
        font-size: 26px;
        font-weight: 700;
        color: @primary-color;
        line-height: 22px;
      }
    }

    .unit {
      font-size: 14px;
      color: #333333;
      font-weight: 600;
      margin: 0 28px 0 5px;
    }

    .contrast {
      flex: 1;
      display: flex;
      align-items: center;

      .sequential-same {
        justify-content: flex-end;

        :deep(.sequential) {
          margin-right: 10px;
        }
      }
    }

    // }
  }

  .line-chart {
    flex: 1;
  }
}
</style>
